<template>
  <el-dialog
    class="set-message-dialog"
    :close-on-press-escape="false"
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="800px"
    append-to-body
  >
    <el-form
      v-loading="loading"
      class="message-content"
      ref="form"
      :model="form"
      
      label-position="top"
      hide-required-asterisk
    >
      <div class="send-obj">
        <el-form-item
          v-if="form.sendTargetParam && module !== 'universal'"
          :label="$t('message.setting.setMsgDialog.t1')" 
          prop="sendTargetParam"
          :rules="{ required:true, validator: checkSendTarget,trigger: ['change'] }"
        >
          <!-- 选人组件 -->
          <publink-select
            v-if="isSelectUserComponent"
            class="user-target-select"
            ref="userComponetSelect"
            :placeholder="$t('common.placeholder.select')"
            @clear="clearSelectUserHandle"
            @click.native="showSelectUserHandle"
            @remove-tag="removeTagHandle"
            v-model="form.sendTargetParam[selectUserValueKey]"
            is-search-user
            value-key="userId"
            multiple
            :collapse-tags="isShowCollapseTags"
          >
            <el-option
              v-for="item in form.sendTargetParam.selectedUsers"
              :key="item.userId"
              :label="item.displayName"
              :origin="item"
              :value="item">
              
              <template v-if="isOpenData && item.staffId">
                <open-data type="userName" :openid="item.staffId"></open-data>
              </template>
              
            </el-option>

          </publink-select>

          <!-- 大类别通知对象 -->
          <el-select 
            v-else
            class="user-target-select"
            v-model="form.sendTargetParam.userTypeList"
            :placeholder="$t('common.placeholder.select')"
            multiple
          >
            <template v-for="item in sendObject" >
              <el-option
                v-if="sendList.includes(item.value)"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              />
            </template>
          </el-select>
        </el-form-item>

        <el-form-item
          v-if="
            (type === 'customer' &&
            form.applyRangeList &&
            module !== 'paas' &&
            module !== 'project' &&
            messageTypeName !== 'satisfactionReturnVisitV2' &&
            messageTypeName !== 'satisfactionCallcenter') || showScopeOfApplication
          "
          class="apply-range-list"
          style="margin-left:24px;"
          :label="$t('message.setting.setMsgDialog.t2')"
          prop="applyRangeList"
          :rules="{ type:'array' ,message: $t('message.setting.setMsgDialog.t3')}"
        >
          <el-select
            v-model="form.applyRangeList"
            :placeholder="$t('common.placeholder.select')"
            multiple
            collapse-tags
            clearable
          >
            <el-option v-for="item in applicationRange" :label="item.name" :value="item.id" :key="item.id" />
          </el-select>
        </el-form-item>
      </div>

      <!-- 会话超时提醒定制通知类型 -->
      <el-form-item v-if="messageTypeName == 'ConversationTimeOut'" :label="$t('message.setting.setMsgDialog.t4')">
        <el-select class="user-target-select" v-model="form.sendTargetParam.userTypeList" :placeholder="$t('common.placeholder.select')" multiple>
          <template v-for="item in sessionTimeoutSendObject">
            <el-option :label="item.label" :value="item.value" :key="item.value" />
          </template>
        </el-select>
      </el-form-item>

      <el-form-item v-if="showTimeField" :label="$t('message.setting.setMsgDialog.t5')" prop="taskPlanTime">
        <i18n path="message.setting.setMsgDialog.t6" tag="div">
          <el-input
            place="num"
            style="width:68px;margin:0 10px 0 14px;"
            type="text"
            v-model="form.taskPlanTime"
            @input="timeInputHandle">
          </el-input>
        </i18n>
      </el-form-item>
            
      <el-form-item 
        :label="$t('message.setting.setMsgDialog.t7')"
        prop="sendChannelList"
        class="send-channel-list"
        :rules="{ required: true, type:'array' ,message: $t('message.setting.setMsgDialog.t8')}"
      >
        <el-checkbox-group v-model="form.sendChannelList">

          <div class="channel-item" v-for="(item) in channelList" :key="item.channelType">
            <!-- 通用消息- 系统消息默认不可以去除选中 -->
            <el-checkbox
              @change="(val) => { sendChannelChangeHandle(item.channelType,val)}"
              :label="item.channel"
              :disabled="module === 'universal' && item.channel == 1"
            >
              {{item.channelTypeDescription}}
            </el-checkbox>

          </div>

        </el-checkbox-group>
      </el-form-item>

      <el-tabs class="channel-tab" v-model="activeName" >
  
        <template v-for="tab in channelList">
          <el-tab-pane
            class="template-content"
            :label="tab.channelTypeDescription"
            :name="tab.channelType"
            :key="tab.channelType"
            v-if="dialogVisible"
          >
            <!-- 系统消息模版 -->
            <SystemMesTel 
              v-if="tab.channelType === 'sysMsg'" 
              ref="sysMsg"
              :channel="tab.channel"
              :type="type"
              :send-channel-list="form.sendChannelList"
              :source-data="systemTemplate"
            />

            <!-- 短信消息模版 -->
            <SmsMesTel 
              v-else-if="tab.channelType === 'smsMsg'" 
              ref="smsMsg"
              :channel="tab.channel"
              :type="type"
              :module-type="module"
              :readonly="module === 'universal'"
              :send-channel-list="form.sendChannelList"
              :source-data="smsTemplate"
              :taskExtendData="commonTaskField"
              :messageTriggerType="messageTriggerType"
              @update="update"
            />

            <!-- 电话消息模版 -->
            <CallMesTel 
              v-else-if="tab.channelType === 'call'" 
              ref="call"
              :channel="tab.channel"
              :type="type"
              :send-channel-list="form.sendChannelList"
              :isValidateChange="module !== 'paas'"
              :source-data="callTemplate"
            />

            <!-- 没绑定邮箱或公众号时展示 -->
            <no-auth
              v-else-if="isShowNoAuth(tab.channelType)"
              :is-button-show="true"
              :tips-pic="noAuthPic"
              :button-text="bindData[tab.channelType].btnText"
              :tips-text="bindData[tab.channelType].tips"
              @btn-event="btnEvent(tab.channelType)"
            />
            
            <!-- 邮件消息模版 -->
            <EmailMessage  
              v-else-if="tab.channelType === 'emailMsg'"
              ref="emailMsg"
              :channel="tab.channel"
              :type="type"
              :module-type="module"
              :readonly="module === 'universal' || messageTypeName === 'satisfactionReturnVisitV2'"
              :send-channel-list="form.sendChannelList"
              :source-data="emailTemplate"
              :taskExtendData="commonTaskField"
              :messageTriggerType="messageTriggerType"
              :isTaskCustomNode="messageTypeName === 'taskCommon'"
            />

            <!-- 公众号消息模版 -->
            <WechatMesTel 
              v-else-if="tab.channelType === 'weixin'" 
              ref="weixin"
              :channel="tab.channel"
              :type="type"
              :send-channel-list="form.sendChannelList"
              :source-data="wechatTemplate"
            />
            
          </el-tab-pane>
        </template>
      </el-tabs>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">{{ $t('common.base.cancel') }}</el-button>
      <el-button type="primary" @click="submitForm('form')">{{ $t('common.base.save') }}</el-button>
    </span>
    <el-dialog
      :title="$t('message.setting.setMsgDialog.t9')"
      class="paas-send-target__dialog"
      :visible.sync="showPaasChooseUserModal"
      :close-on-click-modal="false" 
      append-to-body
      width="700px">
      <publink-paas-config-contact
        v-if="showPaasChooseUserModal"
        :is-need-tag-slot="false"
        ref="configContact"
        :value="paasContactChooseUsers"
        :flow-api="flowApi"
        :fields="flowData.fields"
        :show-tab-setting="showPaasContactTabSetting"
        :is-dynamic-flow-design-choose="isDynamicFlowDesignChoose"
        :show-dynamic-menus="showDynamicMenus"
        show-dynamic>
      </publink-paas-config-contact>
     <span slot="footer" class="dialog-footer">
      <el-button @click="showPaasChooseUserModal = false">{{ $t('common.base.cancel') }}</el-button>
      <el-button type="primary" @click="handleChooseUserSubmit">{{ $t('common.base.save') }}</el-button>
    </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { isOpenData } from '@src/util/platform';
// 系统消息模版
import SystemMesTel from '../messageTel/SystemMesTel.vue'
// 短信消息模版
import SmsMesTel from '../messageTel/SmsMesTel.vue'
// 公众号消息模版
import WechatMesTel from '../messageTel/WechatMesTel.vue'
// 电话消息模版
import CallMesTel from '../messageTel/CallMesTel.vue'
// 邮件消息模版
import EmailMessage from '../emailMessage/EmailMessage'

import { isSubForm, canUseField } from '@src/util/function';
// 未绑定提示组件
import noAuth from '@src/component/auth/noAuth'
// 接口
import * as Message from '@src/api/Message';
import * as FlowApi from '@src/api/FlowApi.ts';
import { getOssUrl } from '@src/util/assets'
const noAuthPic = getOssUrl('/no_data.png')
import { sendObject, sessionTimeoutSendObject } from '../../modal/messageData'
import NoDataViewNew from '@src/component/common/NoDataViewNew';
import { openAccurateTab } from '@src/util/platform';

import SelectUser from './selectUser.vue' 
import _ from 'lodash'
import{  getAllFields } from '@src/api/TaskApi';
import { roleDataList, getProjectTypeField } from '@src/api/ProjectManage.ts'
import { PageRoutesTypeEnum } from '@model/enum/PageRoutesEnum'
/* mixin */
import { VersionControlMessageMixin } from '@src/mixins/versionControlMixin'
import { t } from '@src/locales'
const SHOW_TAB_SETTING = { show: true, isMulti: true };

export default {
  mixins: [VersionControlMessageMixin],
  props:{
    // 消息类型 inside：内部，customer：客户
    type: {
      type:String,
      required:true
    },

    // 消息类型名称英文
    messageTypeName: {
      type:String,
      required:true
    },
    // 项目类型id
    projectTypeId: {
      type:String,
      required:false
    },
    // 项目管理触发对象的类型 任务/项目
    messageTriggerType: {
      type:String,
      required:false
    },

    // 项目管理触发对象的具体任务类型 单个任务/全部任务
    messageTriggerTypeItem: {
      type:String,
      required:false
    },

    // 任务字段处理： 任务表单id/任务类型
    projectTaskObj: {
      type: Object,
      required:false
    },

    // 消息id
    configId: {
      type:[String, Number],
      required:true
    },

    // 弹框显示/隐藏
    value: {
      type:Boolean,
      required:true
    },

    reportSendTime:{
      type:String,
      required:false
    },
    activeModule:{
      type:String,
      default:''
    }
  },
  data(){
    return{
      isOpenData,
      paasContactVisible: false,

      paasContactChooseUsers: [],
      showPaasChooseUserModal: false,
      loading:false,
      // 通知渠道；
      // 内部消息有系统消息、短信消息和邮件消息三个渠道
      // 客户消息短信消息、公众号消息和邮件消息三个渠道
      channelList:[],
      form:{
        sendChannelList:[],
        // 通知对象
        sendTargetParam:{
          nameStr: [],
          tagList:[],//选人组件选择的部门
          userList:[],//选人组件选择的用户
          roleList:[],//选人组件选择的角色
          userTypeList:[],//select组件选择的大类别通知对象
          paasReceiver: ''
        }
      },

      // 传递给模版的数据，从接口获取
      // 系统消息模版需要的数据
      systemTemplate:{},
      // 短信消息模版需要的数据
      smsTemplate:{},
      // 邮件消息模版需要的数据
      emailTemplate:{},
      // 公众号消息模版需要的数据
      wechatTemplate:{},
      // 电话消息模版需要的数据
      callTemplate:{},

      // 微信公众号/邮箱绑定数据
      bindData:{
        weixin:{
          isSetUp:true,
          btnText: t('message.setting.setMsgDialog.t10'),
          tips: t('message.setting.setMsgDialog.t11')
        },
        emailMsg:{
          isSetUp:true,
          btnText: t('message.setting.setMsgDialog.t12'),
          tips: t('message.setting.setMsgDialog.t13')
        },
      },

      // 没权限时提示图片
      noAuthPic,
      // 选中的tab的name
      activeName:'',
      sendList:[],
      // 应用范围列表数据
      applicationRange:[],
      sendObject,
      showPaasContactTabSetting: {
        department: { ...SHOW_TAB_SETTING },
        member: { ...SHOW_TAB_SETTING },
        role: { ...SHOW_TAB_SETTING},
        dynamic: { ...SHOW_TAB_SETTING }
      },
      isDynamicFlowDesignChoose: true,  // 判断是动态获取的话设置支持节点负责人获取节点的列表
      showDynamicMenus: [],
      sessionTimeoutSendObject,
      userLoading: false,
      selectUserTypeList: [],
      treeData:[
        // 项目成员（可以具体到人）
        {
          id: 1,
          label: t('projectManage.setting.messageSetting.userLabel1'),
          userType: 1,
          children: []
        },
        // 项目角色（多个人员）
        {
          id: 2,
          label: t('projectManage.setting.messageSetting.userLabel2'),
          userType: 1,
          children: []
        }
      ],
      // 项目成员的固定数据
      projectMemberList: [
        // 项目负责人
        {
          id: 'PROJECT_LEADER',
          name: t('projectManage.setting.messageSetting.memberLabel1'),
        },
        // 项目负责人上级主管
        {
          id: 'PROJECT_LEADER_SUPERIOR',
          name: t('projectManage.setting.messageSetting.memberLabel2'),
        },
        // 任务负责人
        {
          id: 'TASK_OWNER',
          name: t('projectManage.setting.messageSetting.memberLabel3'),
        },
        // 任务负责人上级主管
        {
          id: 'TASK_OWNER_SUPERIOR',
          name: t('projectManage.setting.messageSetting.memberLabel4'),
        }
      ],
      defaultProps:{
        children: 'children',
        label: 'label'
      },

      commonTaskField: [], // 项目管理-任务表单字段
    }
  },
  inject: {
    module: { value: "module", default: null },
    flowData: { value: "flowData", default: null },
    projectData: { value: "projectData", default: null },
  },
  computed:{
    title(){
      return this.type === 'inside' ? t('message.setting.setMsgDialog.t14') : t('message.setting.setMsgDialog.t15');
    },
    dialogVisible:{
      get(){
        return this.value;
      },
      set(val){
        this.$emit('input', val)
      }
    },
    // 展示时间表单字段
    showTimeField(){
      return this.type === 'customer' && this.messageTypeName === 'TaskPlanRemind_NEW'
    },
    // 返回true，表示该部分为选人组件
    isSelectUserComponent(){
      const sendList = this.sendList
      return (sendList.length === 1 && sendList.includes(5)) || this.module === 'paas' || (this.module === 'project' && this.type === 'inside')
    },
    flowApi() {
      return { ...FlowApi };
    },
    selectUserValueKey() {
      return (this.module === 'paas' || this.module === 'daily') ? 'nameStr' : 'selectedUsers'
    },
    showScopeOfApplication() {
      return this.type === 'inside' && this.messageTypeName !== 'ConversationTimeOut' && (this.module === 'task' || this.module === 'event')
    },
    /**选择通知对象下拉是否现实折叠 */
    isShowCollapseTags() {
      return this.form?.sendTargetParam?.[this.selectUserValueKey]?.length > 3
    }
  },
  components:{
    SystemMesTel,
    SmsMesTel,
    WechatMesTel,
    CallMesTel,
    noAuth,
    SelectUser,
    EmailMessage,
    [NoDataViewNew.name]: NoDataViewNew,
  },
  mounted(){
    this.openHandle()
  },
  methods:{
    handleChooseUserSubmit() {
      // 获取对应的选中paas人员控件的值
      const checkedArr = this.$refs?.configContact?.$children[0]?.checked || []
      const replaceCheckedArr = checkedArr.map(user=> {
        const { id, name, type, extend } = user;
        const result = { id, name, type };
        if (extend) result.extend = extend;
        return result;
      })

      this.$set(this.form, 'sendTargetParam', {
        nameStr: replaceCheckedArr.map(item=> item.name),
        userTypeList:[],
        paasReceiver: JSON.stringify(replaceCheckedArr),
        selectedUsers: []
      })

      this.showPaasChooseUserModal = false
    },

    update() {
      // 短信提交审核后更新信息
      Message.getSmsDetail(this.getPortParam()).then(res => {
        let param = {
          channelType: 'smsMsg',
          templateName: 'smsTemplate',
          templateData: res.data || {}
        }
        this.updataMsgTemplateData(param);
        this.$refs.smsMsg?.[0]?.editorHandle(false)
      })
    },

    checkSendTarget(rule, value, callback) {
      const { userTypeList, nameStr } = value
      // 非选人组件的校验或选人组件

      if (this.module === 'project' && this.type === 'inside') {
        // 项目模块内部消息处理
        if (!nameStr.length) {
          return callback(new Error(t('message.setting.setMsgDialog.t16')));
        }
      } else {
        if(this.isSelectUserComponent && !nameStr.length) {
          return callback(new Error(t('message.setting.setMsgDialog.t16')));
        }  
        if(!this.isSelectUserComponent && !userTypeList.length){
          return callback(new Error(t('message.setting.setMsgDialog.t16')));
        }
      }

      callback();
    },

    // 通过名字匹配，当delName === selectedArr数组某个元素的name或displayName时，从selectedArr数组里面去除该元素
    delSendTarget(selectedArr,delName){
      let newSelectedArr = []
      for(let target of selectedArr){
        const name = target.name || target.displayName

        if(name !== delName) {
          newSelectedArr.push(target)
        }
      }
      return newSelectedArr
    },

    clearSelectUserHandle(){
      this.$set(this.form,'sendTargetParam',{
        nameStr: [],
        selectedDepartments:[],
        selectedUsers:[],
        selectedRoles:[],
        userTypeList:[]
      })
    },

    // 删除某个发送对象
    removeTagHandle(delName){
      const { selectedDepartments, selectedUsers, selectedRoles, paasReceiver } = this.form.sendTargetParam
      let paasSelectedArr = paasReceiver ? JSON.parse(paasReceiver) : ''

      if(this.module === 'paas') {
        paasSelectedArr = this.delSendTarget(paasSelectedArr,delName)
        this.$set(this.form.sendTargetParam,'paasReceiver',JSON.stringify(paasSelectedArr))
        return
      }

      if (this.module === 'project') {
        // 项目管理选人组件和新的选人组件共用
        paasSelectedArr = this.delSendTarget(paasSelectedArr,delName)
        this.$set(this.form.sendTargetParam,'paasReceiver',JSON.stringify(paasSelectedArr))
      }

      this.$set(this.form.sendTargetParam,'selectedDepartments',this.delSendTarget(selectedDepartments,delName))
      this.$set(this.form.sendTargetParam,'selectedUsers',this.delSendTarget(selectedUsers,delName))
      this.$set(this.form.sendTargetParam,'selectedRoles',this.delSendTarget(selectedRoles,delName))

    },

    // 弹出选人组件
    async showSelectUserHandle(){
      this.$refs.userComponetSelect?.blur()
      const { selectedDepartments, selectedUsers, selectedRoles } = this.form.sendTargetParam

      const options = {
        title: t('message.setting.setMsgDialog.t17'),
        showServiceProvider:false,//是否显示服务商
        selectedDepartments:selectedDepartments || [],
        selectedUsers:selectedUsers || [],
        selectedRoles:selectedRoles || [],
        isTag: true,
      }

      let res = {}

      if(this.module === 'paas') {
        this.$refs.userComponetSelect?.blur()
        // 判断是内部消息还是客户消息隐藏对应的动态获取
        const unShowChooseUserModalTabKeys = ['department', 'member', 'role', 'dynamic']
        const showDynamicMenus = [
          t('message.setting.setMsgDialog.dynamicMenus[0]'), 
          t('message.setting.setMsgDialog.dynamicMenus[1]'),
          t('message.setting.setMsgDialog.dynamicMenus[2]'),
          t('message.setting.setMsgDialog.dynamicMenus[3]'),
          t('message.setting.setMsgDialog.dynamicMenus[4]'),
          t('message.setting.setMsgDialog.dynamicMenus[5]'),
          t('message.setting.setMsgDialog.dynamicMenus[6]')
        ]
        if(this.type === 'customer') {
          this.showDynamicMenus = [showDynamicMenus[0], showDynamicMenus[3], showDynamicMenus[4], showDynamicMenus[5], showDynamicMenus[6]]
          this.isDynamicFlowDesignChoose = true
          unShowChooseUserModalTabKeys.slice(0, 3).forEach(item => {
              this.showPaasContactTabSetting[item].show = false
          })
        } else {
          this.showDynamicMenus = showDynamicMenus.slice(0, 3)
          this.isDynamicFlowDesignChoose = false
           unShowChooseUserModalTabKeys.forEach(item => {
              this.showPaasContactTabSetting[item].show = true
              // 判断是动态获取的话设置支持节点负责人获取节点的列表
              if(item === 'dynamic') this.isDynamicFlowDesignChoose = false
          })
        }
        const paasReceiver = this.form?.sendTargetParam?.paasReceiver || ''
        this.paasContactChooseUsers = paasReceiver && paasReceiver.length > 0 ? JSON.parse(paasReceiver) : []
        this.showPaasChooseUserModal = true
        return
      }

      // 项目管理选人组件特殊处理
      if (this.module === 'project') {
        
        // 人员回显兼容处理
        const paasReceiver = this.form?.sendTargetParam?.paasReceiver || ''
        let projectPaasReceiver = paasReceiver && paasReceiver.length > 0 ? JSON.parse(paasReceiver) : []


        let options = {
          title: t('message.setting.setMsgDialog.t17'),
          showServiceProvider:false,//是否显示服务商
          selectedDepartments:selectedDepartments || [],
          max: 10, // [选填]最大人数：当值小于等于0或者不填时，不对选择人数做限制，max值为1时单选，大于1时多选
          selectedUsers: projectPaasReceiver, // [选填] 已选人员 每个人员必须包括userId,displayName,staffId,head这四个属性，只有带max大于1时生效
          mode: 'filter',
          isShowDynamic: true,
          DynamicTabName: t('component.baseSelectUser.dynamicGain'),
        // 自定义渲染动态获取内容
        renderDynamicContent: (h, context) => {
          const isSelectedByUserId = context.isSelectedByUserId
          return (
            <div class="base-select-user-select-panel-container">
              <div class='base-select-user-select-panel-left'>
                <el-tree
                  class="tree-user"
                  data={this.treeData}
                  default-expand-all
                  node-key="id"
                  ref="tree"
                  highlight-current
                  current-node-key={1}
                  onNode-click={this.getTaskTypeUser}
                  props={this.defaultProps}>
                </el-tree>
              </div>
              <div class="base-select-user-select-panel-right">
                <div class="base-select-user-service-provider-right" v-loading={this.userLoading}>
                  <div class="base-select-user-infinite-scroll-user">
                    <div class='base-select-user-user-list'>
                      {!this.userLoading && this.selectUserTypeList.length > 0 && this.selectUserTypeList.map((item) => {
                        return (
                          <SelectUser
                            value={item}
                            selected={isSelectedByUserId(item.id)}
                            onLabelChange={(e) => {
                              this.labelChange(e, context, isSelectedByUserId(item.id))
                            }}
                          >
                          </SelectUser>
                        )
                      })}
                      {
                        !this.userLoading && this.selectUserTypeList.length === 0 && (
                          <div class='task-no-data'>
                            <NoDataViewNew
                              notice-msg={t('common.base.tip.noData')}
                            ></NoDataViewNew>
                          </div>
                        )
                      }
                    </div>
                  </div>

                </div>
              </div>
            </div>
          )
        }
      };

        this.setProjectMemberList()
        res = await this.$fast.select.multi.user(options)
        this.selectUserCallBack(res)
        return
      }

      // 非智能报告类的消息选人组件可以选部门、角色和人
      if(this.module !== 'daily'){
        res =await this.$fast.select.multi.user(options)
        this.selectUserCallBack(res)
        return
      }

      if(this.messageTypeName === 'TagDaily_NEW'){
        // 智能报告-部门汇总日报消息选人组件只能选部门
        res = await this.$fast.select.multi.department(options)
      }else{
        // 智能报告-管理员汇总日报和个人日报消息选人组件只能选部门和角色
        res = await this.$fast.select.multi.departmentAndRole(options)
      }
      this.selectUserCallBack(res)
    },

    async getTaskTypeUser(data) {
      this.selectUserTypeList = [] // 数据切换之前清除
      if (data.id === 1) {
        // 固定的项目成员
        this.setProjectMemberList()
      } else {
        // 项目角色
        this.userLoading = true
        // 项目类型id 请求角色管理
        let res = await roleDataList({ templateId: this.projectTypeId, userType: data.userType || 2})
        this.userLoading = false
        if(res.data && res.data.length > 0) {
          res.data.forEach((item) => {
            item.id = `project|${item.id}`
          })

          this.selectUserTypeList  = res.data
          this.setUserType(1)
        }
      }
    },

    // 设置列表的人员类型
    setUserType(type) {
      this.selectUserTypeList.forEach((item) => {
        this.$set(item, 'typeId', type)
      })
    },
    // 设置项目组成员
    setProjectMemberList() {
      // 项目成员
      if (this.messageTriggerType === 'TASK') {
        this.selectUserTypeList = this.projectMemberList
      } else {
        this.selectUserTypeList = this.projectMemberList.slice(0, 2)
      }
      this.setUserType(1)
    },

    labelChange(val, context, isSelected) {
      if (isSelected) {
        context.$emit('remove', val)
      } else {
        context.$emit('add', val)
      }
    },

    selectUserCallBack({status,data}){
      if(status !== 0) return
      const { users, roles, depts } = data;
      let nameArr = []
      const selectedData = [ ...users, ...roles, ...depts ]
      selectedData.map(item => {
        const { name, displayName} = item
        nameArr.push(name || displayName)
      })
      // 会话超时提醒选择通知对象后不需要清空 userTypeList
      let userTypeList = [];
      if(['ConversationTimeOut'].includes(this.messageTypeName)) {
        userTypeList = this.form?.sendTargetParam?.userTypeList ?? []
      }
      this.$set(this.form,'sendTargetParam',{
        nameStr: nameArr,
        selectedDepartments:depts,
        // 项目管理特殊处理，传参数为paasReceiver
        paasReceiver: this.module  === 'project' ? JSON.stringify(selectedData) : '',
        selectedUsers:users,
        selectedRoles:roles,
        userTypeList
      })
    },

    // 时间输入框，限制输入,
    // 只能输入数字和小数点;只能输入一位小数点;
    timeInputHandle(){
      const { taskPlanTime } = this.form

      this.form.taskPlanTime = taskPlanTime.replace(/[^\d.]/g, '')
        .replace(/\.{2,}/g, '.')
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
        .replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
        .replace(/^\./g, '')
    },

    // 是否展示当前渠道的模版,邮件消息和公众号消息需要判断是否配置了，没有配置不展示该模版
    isShowNoAuth(channelType){
      if(channelType !== 'emailMsg' && channelType !== 'weixin') return false;
      
      const { isSetUp } = this.bindData[channelType]
      return !isSetUp
    },

    sendChannelChangeHandle(channelType, val){
      // 智能报告类型的消息，需要对'smsMsg','emailMsg'进行联动
      if(this.module !== 'daily') return;

      const channelValidList = ['smsMsg', 'emailMsg']

      const { sendChannelList } = this.form

      // 当前操作的字段在channelValidList里，且是选中状态且通知渠道里面美誉勾选系统消息时，将系统消息这个渠道勾选上
      if(channelValidList.includes(channelType) && val && !sendChannelList.includes('sysMsg')){
        this.form.sendChannelList.push('1')
      }
    },


    // 弹框打开时触发
    async openHandle(){
      if (this.module === 'project') {
        this.$nextTick(() => {
          this.$refs.form?.clearValidate()
        })
        this.commonTaskField = []
        if (this.messageTriggerType === 'TASK') {
          let currentTaskFormId = this.messageTriggerTypeItem === 'ALL' ? '' : this.projectTaskObj.taskFormId
          if (this.projectTaskObj.taskType === 'COMMON_TASK') {
            // 通用任务 
            await this.getCommonField(currentTaskFormId)
          } else {
            // 工单任务
            await this.getCommonField()
            // 当个工单任务请求表单字段 全部任务不请求工单表单字段
            if (this.projectTaskObj?.taskFormId) {
              await this.getWorkOderField(this.projectTaskObj?.taskFormId)
            }
          }
        }
      }

      // 从接口获取详细信息
      this.getDetailData()

      // 客户消息模版额外需要一个应用范围字段
      this.type === 'customer' && (this.getMessageApplyRange());
      // 内部消息（工单和客服中心）模版额外需要一个应用范围字段
      this.showScopeOfApplication && (this.getMessageApplyRange());
    },

    // 获取工单任务的表单字段
    async getWorkOderField(taskFormId) {
      // 先请求系统的字段
      // 工单这边的消息字段：系统字段+工单表单字段
      let params = {
        typeId: taskFormId,
        tableName: 'task',
        isFromSetting: true,
      }
      await getAllFields(params).then((res)  => {
        if (res && res.length) {
          let allFields = [...this.commonTaskField, ...res].filter((item) => item.formType !== 'engineerQualification' && item.formType !== 'serviceProviderQualification')
          this.commonTaskField = _.cloneDeep(this.filterField(allFields))
        }
      })
    },

    deteleObject(arr) {
      let obj = {};
      let filterArr = arr.reduce((cur,next) => {
          obj[next.fieldName] ? "" : obj[next.fieldName] = true && cur.push(next);
          return cur;
      },[]) 
      return filterArr
    },

    // 获取通用任务的表单字段
    async getCommonField(taskFormId) {
      let params = {
        tableName: 'mission',
        templateId: taskFormId
      }
      await getProjectTypeField(params).then((res) => {
        const { success, message, data } = res
        if (!success ) return this.$message.error(message)

        let dataArr = data || []
        // 任务消息列表字段： 项目表单字段 + 任务表单字段
        let allFields = [...this.projectData.allfields, ...this.commonTaskField, ...dataArr]
        this.commonTaskField = _.cloneDeep(this.filterField(allFields))
      })
    },


    filterField(allFields) {
      let canShowField = []
      // 系统的字段
      let isSystemFields = allFields.filter((item) => item.isSystem)
      // 非系统字段 自定义字段过滤符合的
      let notSystemFields = allFields.filter((item) => canUseField(item) && !item.isSystem)
      let allShowField = [...isSystemFields, ...notSystemFields]
      // 过滤掉fieldName重复的值
      canShowField = this.deteleObject(allShowField)
      return canShowField
    },


    // 根据事件类型获取应用范围
    getAppRange(data){

      const { eventTypeVOList, taskTypeList } = data || {}

      let val = []

      switch(this.module){

      case 'event': val = eventTypeVOList; break;

      case 'task': val = taskTypeList; break;

      default:break;

      }

      return val ? val : []
    },

    // 获取应用范围列表
    async getMessageApplyRange(){
      try {
        const { status, data } = await Message.getMessageApplyRange();

        if( status !== 0) return;

        // 应用范围列表数据
        this.applicationRange = this.getAppRange(data)
      } catch (error) {
        console.log(error);
      }
    },

    // 获取该消息的配置数据
    async getDetailData(){
      try {
        this.loading = true;

        const param = this.getPortParam()
        const { status, data, message } = await Message.getConfigDetail(param);

        if( status !== 0){
          this.errors([message])
          return
        }

        this.getChannelTemplateDetail(data)

      } catch (error) {
        this.loading = false;
        console.log(error);
      }
    },

    // 根据传递的渠道列表，获取相应的调用接口需要的数据
    channelMapPort(channelList) {
      
      const allChannel = {
        sysMsg: {
          port: Message.getSysDetail,
          templateName: 'systemTemplate'
        },
        smsMsg: {
          port: Message.getSmsDetail,
          templateName: 'smsTemplate'
        },
        emailMsg: {
          port: Message.getEmailDetail,
          templateName: 'emailTemplate'
        },
        weixin: {
          port: Message.getWxDetail,
          templateName: 'wechatTemplate'
        },
        call: {
          port: Message.getPhoneDetail,
          templateName: 'callTemplate'
        }
      }

      let messageChannelData = {}
      // 获取当前消息的所有消息渠道的数据
      channelList?.map(channelType => {
        messageChannelData[channelType] = allChannel[channelType]
      })
      return messageChannelData
    },

    getPortParam(){
      return {
        messageTypeName:this.messageTypeName,
        side:this.type === 'inside' ? 0 : 1
      }
    },

    getChannelTemplateDetail(detailData){
      // 获取该消息的渠道列表
      let { sendChannelDescriptions = [] } = detailData?.sendChannels || {}
      let channelList = []
      sendChannelDescriptions?.map(item => channelList.push(item.channelType))
      if(this.activeModule === 'course'){
        channelList = channelList.filter(item=>item!=='call')
      }
      // 通过该消息的渠道列表获取该消息的渠道列表模版数据的参数
      const channalMapPort = this.channelMapPort(channelList)
      const param = this.getPortParam()

      let portPromiseArr = []
      channelList.map( item => { 
        const { port } = channalMapPort[item]
        portPromiseArr.push(port(param))
      })

      Promise.all(portPromiseArr).then((res) => {
        if(!res?.length) return
        // 存储接口返回的错误
        let errTextArr = [];

        for(let index in res){
          const { status, message, data } = res[index] || {}

          const channelType = channelList[index]

          const { templateName = {} } = channalMapPort[channelType] || {}

          if(status !== 0){
            errTextArr.push(message)
            continue;
          }
          // 更新指定渠道的消息模版数据
          data && this.updataMsgTemplateData({channelType, templateName, templateData: data});

        }
        // 更新当前表单需要的除模版的数据
        this.setFormData(detailData)

        errTextArr.length && this.errors(errTextArr);

      })
      .finally(() => {
        this.loading = false;
      });
    },

    /**
     * @description 更新指定渠道的消息模版数据
     * @param {Object} {channelType:渠道,templateName:该渠道模版名，templateData：该渠道模版内容}
     */
    async updataMsgTemplateData(sourceData = {}){
      const { channelType, templateName, templateData = {} } = sourceData
      if(!channelType) return

      if(channelType === 'emailMsg'){
        templateData?.attachment?.map(item => {
          const { fileName, ossUrl, fileSizeStr } = item
          item.filename = fileName
          item.url = ossUrl
          item.fileSize = fileSizeStr
        })
      }

      if(channelType === 'sysMsg' && this.module === 'paas'){
        const defaultSysDisplayFieldCheckMap = templateData?.sysDisplayFieldCheckMap || []
        const defaultSysDisplayFieldCheckMapKeys = defaultSysDisplayFieldCheckMap.map(item=> item.key)
        // 系统消息过滤应用连接
        const sysDisplayFieldCheckMap = this.flowData.msgTemplateSelectFields.filter(item=> !defaultSysDisplayFieldCheckMapKeys.includes(item.fieldValue) && item.fieldValue !== 'smsUrl').map(item=> {
          return {
            canCancel: true,
            check: false,
            defaultValue: "xxxxx",
            key: item.fieldValue,
            value: item.fieldName}
        })
        if(templateData?.sysDisplayFieldCheckMap && Array.isArray(templateData.sysDisplayFieldCheckMap)) {
          templateData.sysDisplayFieldCheckMap = templateData.sysDisplayFieldCheckMap.concat(sysDisplayFieldCheckMap)
        }
      }

      if (channelType === 'sysMsg' && this.module === 'project') {
        // 任务类型规则的话，单独请求接口
        if (this.messageTriggerType === 'TASK') {
          const sysDisplayFieldCheckMap = this.commonTaskField.filter(field => !isSubForm(field) && !field?.isHidden).map(item=> {
            return {
              canCancel: true,
              check: false,
              defaultValue: "xxxxx",
              key: item.fieldName,
              value: item.displayName}
          })

          let templateDataList = templateData?.sysDisplayFieldCheckMap || []
          sysDisplayFieldCheckMap.forEach((item) => {
            templateDataList.forEach((ele) => {
              if (item.key === ele.key) {
                item.check = ele.check
              }
            })
          }) 
          // 去重 计划开始时间和计划结束时间
          templateData.sysDisplayFieldCheckMap = sysDisplayFieldCheckMap
        } else {
          // 项目管理模块
          const sysDisplayFieldCheckMap = this.projectData.fields.map(item=> {
            return {
              canCancel: true,
              check: false,
              defaultValue: "xxxxx",
              key: item.fieldValue,
              value: item.fieldName}
          })

          let templateDataList = templateData?.sysDisplayFieldCheckMap || []
          sysDisplayFieldCheckMap.forEach((item) => {
            templateDataList.forEach((ele) => {
              if (item.key === ele.key) {
                item.check = ele.check
              }
            })
          }) 

          // 项目编号默认选中
          sysDisplayFieldCheckMap.forEach((item) => {
            if (item.key === 'projectNo') {
              item.canCancel = false
              item.check = true
            }
          })
          templateData.sysDisplayFieldCheckMap = sysDisplayFieldCheckMap
        }
      }
      templateName && (this[templateName] = templateData);
    },

    // 未绑定微信公众号/邮箱提示组件的按钮
    btnEvent(type){

      // 微信公众号设置
      if(type === 'weixin'){
        openAccurateTab({
          type: PageRoutesTypeEnum.PageSettingDoMyself,
          title: t('common.pageTitle.pageWxSet'),
        })
      }else if(type === 'emailMsg'){
        openAccurateTab({
          type: PageRoutesTypeEnum.PageSettingChannel,
          title: t('setting.messageChannel.settingTitle'),
          params:'activeTab=email'	
        })
      }

      
    },

    setFormData(data){
      const { 
        taskPlanTime = '', 
        sendChannels = {}, 
        userTypeList = [], 
        sendTargets = {}, 
        applyRangeList = [], 
        isWechatOfficialSetUp = false,
        isEmailSetUp = false
      } = data

      let { avaliableList = [], sendChannelDescriptions = [] } = sendChannels || {}

      const { sendTargetPartList = [], paasReceiver = '' } = sendTargets
      

      // paas的暂时过滤相关微信渠道
      // if(this.module === 'paas') sendChannelDescriptions = sendChannelDescriptions.filter(item => item?.channelType !== 'weixin')
      // 发送渠道列表数据
      // 不包含客服云版本时隐藏电话消息
      this.channelList = (sendChannelDescriptions || []).filter(item => {
        if (item.channelType == 'call') {
          if(this.activeModule !== 'course'){
            return this._isShowMessagePhoneMessage
          }else{
            return false
          }
        }
        return item
      })

      this.$set(this.form, 'sendChannelList', avaliableList || []);

      // 除通用消息外其他消息有通知对象
      if(this.module !== 'universal'){
        let selectedDepartments = []
        let selectedUsers = []
        let selectedRoles = []
        let nameArr = []

        if(this.module === 'paas') {
          if(paasReceiver && paasReceiver.length > 0) {
            const parsePaasReceiver = JSON.parse(paasReceiver)
            nameArr = parsePaasReceiver.map(item=> item.name)
          }
        } else if (this.module === 'project') {
          if(paasReceiver && paasReceiver.length > 0) {
            const parsePaasReceiver = JSON.parse(paasReceiver)
            nameArr = parsePaasReceiver.map(item=> item.name)
          }

          sendTargetPartList?.map(item => {
            const { id, typeId, name, logo, staffId } = item
            // typeId 1用户，2部门，4角色，
            nameArr.push(name)
            let newItem = { id, typeId, name, logo }

            if(typeId == 1){
              newItem = {
                userId:id,
                typeId,
                staffId,
                displayName:name,
                head:logo
              }
            }

            typeId == 1 && (selectedUsers.push(newItem));
            typeId == 2 && (selectedDepartments.push(newItem));
            typeId == 4 && (selectedRoles.push(newItem));
          })
        } else {
          sendTargetPartList?.map(item => {
            const { id, typeId, name, logo, staffId } = item
            // typeId 1用户，2部门，4角色，
            nameArr.push(name)
            let newItem = { id, typeId, name, logo }

            if(typeId == 1){
              newItem = {
                userId:id,
                typeId,
                staffId,
                displayName:name,
                head:logo
              }
            }

            typeId == 1 && (selectedUsers.push(newItem));
            typeId == 2 && (selectedDepartments.push(newItem));
            typeId == 4 && (selectedRoles.push(newItem));
          })
        }
        this.$set(this.form, 'sendTargetParam', {
          nameStr:nameArr,
          selectedDepartments,//选人组件选择的部门
          selectedUsers,//选人组件选择的用户
          selectedRoles,//选人组件选择的角色
          userTypeList:sendTargets.userTypeList || [],//select组件选择的大类别发送对象
          paasReceiver: paasReceiver,
        });
      }

      // 客户消息,内部消息模版额外需要一个应用范围字段
      (this.type === 'customer' || this.showScopeOfApplication) && (this.$set(this.form, 'applyRangeList', applyRangeList || []));

      // 发送时间
      this.showTimeField && this.$set(this.form, 'taskPlanTime', taskPlanTime);

      this.sendList = userTypeList || []

      // 是否有配置邮件消息和公众号消息
      this.bindData.weixin.isSetUp = isWechatOfficialSetUp 
      this.bindData.emailMsg.isSetUp = isEmailSetUp

      const { channelType } = this.channelList[0]
      // 默认选中第一个tab 如果短信审核后定位到短信消息
      this.activeName = channelType
    },  
    
    
    // 获取通知渠道对应的消息模版组件的异步校验方法和提交的字段
    async getModuleValidate(){
      // 用于存储每个tab需要提交给接口的数据
      let channelTabSubmitParam = {}

      const { sendChannelList } = this.form

      // 将需要校验的消息模版存入channelTabValidate
      let channelTabValidate = []
      // 找到短信渠道
      const channelItem = this.channelList.find(item=>item.channelType === 'smsMsg') || {}
      const { channelType } = channelItem
      const channelDom = this.$refs[channelType] && this.$refs[channelType][0]
      // 编辑状态下的短信消息修改内容点击保存校验提示
      if(channelDom && channelDom.editorStatue && channelDom.isChange()) {
        try {
          const result = await this.$confirm('短信模板文案未提交审核，是否需要提交审核？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
        } catch (error) {
          // 点击取消 不做操作还停留在当前页面
          console.warn(error)
          return {}
        }
      }
      this.channelList.map(item => {
        const { channelType, channel } = item
        const channelDom = this.$refs[channelType] && this.$refs[channelType][0]
        if(channelDom) {
          
          // 该渠道是否勾选了
          const isSelected = sendChannelList.includes(channel)
          // 校验规则：当勾选了模版，或是没有勾选模版但是有修改模版内容
          // 提交规则：不管有没有勾选当模版有修改，就要提交

          // UI现在要改成勾选了渠道才校验必填内容 如果没有勾选渠道不校验
          if(isSelected && channelDom.isChange()){
            // 需要校验的消息模版
            channelTabValidate.push(channelDom.validate())
            // 需要提交的消息模版内容
            channelDom.getParam && (channelTabSubmitParam = { ...channelTabSubmitParam, ...channelDom.getParam() });
          }
        }
      })

      return {
        channelTabValidate,
        channelTabSubmitParam
      }
    },

    submitForm(formName) {
      this.saveNeedValidTab(formName)
    },

    // 保存时需要校验tab模块
    async saveNeedValidTab(formName){
      // 获取选勾选的通知渠道对应的消息模版组件的异步校验方法和提交的字段
      const { channelTabValidate, channelTabSubmitParam } = await this.getModuleValidate()
      // 如果是短信消息编辑了模板保存提示点击取消后return 不进行后续操作
      if(!channelTabValidate) return
      let validateList = [ this.$refs[formName].validate()]

      // 通用消息，不能编辑消息模版，因此不校验，非通用消息，需要校验
      if(this.module !== 'universal'){
        validateList = [ ...validateList, ...channelTabValidate ]
      }
      // 将需要校验的tab和该弹框的表单的校验组合成promise
      Promise.all(validateList).then(res => {

        // 将tab校验的错误结果过滤出来
        let errTextArr = res.filter(val => {
          return typeof val === 'string'
        })

        // 校验成功，调用接口，提交
        if(!errTextArr.length){
          // 调用接口
          this.updataData(channelTabSubmitParam)
          return
        }

        this.errors(errTextArr)
                

      }).catch(e => {
        console.log(e)
      })
    },

    errors(errTextArr = []){
      this.$message({
        customClass:'valid-error-tips',
        type: 'warning',
        dangerouslyUseHTMLString: true,
        message: `${errTextArr?.join('<br/>')}`
      });
    },

    // 更新数据
    async updataData(channelTabSubmitParam){
      let param = {
        ...this.form,
        configId:this.configId,
        paasConfigName: this.configId,
        side:this.type === 'inside' ? 0 : 1,
        ...channelTabSubmitParam
      }

      // paas的删除configId
      if(this.module === 'paas' || this.module === 'project') Reflect.deleteProperty(param, 'configId')

      this.reportSendTime && (param.reportSendTime = this.reportSendTime);

      const { selectedDepartments = [], selectedUsers = [], selectedRoles = [], userTypeList = [], paasReceiver = '' } = param.sendTargetParam
      let sendTargetPartList = []
      let allSendTarget = []


      if (this.module === 'project' && this.type === 'inside') {
        // 为了后端解析数据源统一 
        allSendTarget = (paasReceiver && paasReceiver.length > 0) ? JSON.parse(paasReceiver) : []
      } else {
        allSendTarget = [...selectedUsers,...selectedRoles,...selectedDepartments]
      }

      // 更新paas的发送对象处理（paas不做处理）
      allSendTarget.map(item => {
        const { id, typeId, userId, staffId } = item
        let newItem = {
          id:id || userId,
          typeId
        }
        typeId == 1 && (newItem.staffId = staffId);
        sendTargetPartList.push(newItem)
      })

      param.sendTargetParam = {
        userTypeList,
        sendTargetPartList,
        paasReceiver
      }

      try {
        this.loading = true;

        const { status, data, message } = await Message.updateSysMsg(param);

        this.loading = false;

        if (status != 0) return this.$message.warning(message);

        // 关闭弹框
        this.dialogVisible = false

        // 由于更新成功后，列表中的id可能会发生改变，所以需要更新下列表接口
        this.$emit('getListByModule')

      } catch (error) {
        this.loading = false;
        console.log(error);
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.set-message-dialog ::v-deep .el-dialog{
    top: 50%;
    left: 50%; 
    transform: translate(-50%,-50%);
    margin:0 !important;
    .el-dialog__body {
      padding:16px 20px 13px;
      overflow-y: auto;
      max-height: calc(100vh - 100px);
    }
    overflow: visible;
}
.set-message-dialog  {
  .user-target-select{
    width:  300px;
  }
  ::v-deep .user-select{
    /* min-width: 220px; */
    .el-select__tags-text {
      display: inline-block;
      max-width: 90px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    .el-tag__close {
      display: none
    }
  }
}
.el-checkbox{
    margin-right:10px;
}
.channel-item{
    display: inline-block;
    margin-right:34px;
    .el-button--text{
        margin-right:6px;
    }
    .icon-more{
        display:inline-block;
        color:#595959;
        font-size:14px;
        transition: 0.3s all;
    }
    .active{
        .icon-more{
            color:$color-primary-light-6;
            transform:rotate(180deg);
        }
    }
}
.template-content{
    height: 420px;
    background: #F5F5F5;
    border-radius: 4px;
    overflow-y:auto;
}
.send-obj{
    display: flex;
}
.channel-tab{
    min-height:360px;
    margin-bottom: 14px;
    /* ::v-deep .el-tabs__nav-wrap .el-tabs__nav-scroll{
        padding-left:13px;
    } */
}


.apply-range-list  ::v-deep .el-form-item__content{
  .el-select{
    width:182px;
    .el-select__tags span{
      &:first-child{
        max-width:100px;
      }
    }
  }
}
::v-deep {
  .no-auth{
    background:#F5F5F5;
    padding-top:100px;
  }
  .el-form-item--small.el-form-item{
    margin-bottom:14px;
  }
  .send-channel-list{
    .el-checkbox-group,.channel-item{
      height:20px;
      line-height:20px;
    }
  }
  .el-tabs__nav-wrap::after{
    display: none;
  }
  .el-tabs__header{
    margin: 0
  }
}


.paas-send-target__dialog {
  ::v-deep {
    .el-dialog__body{
        padding: 20px;
      }
      .el-dialog__headerbtn{
        top: 4px
    }
  }
}
</style>
<style lang="scss">
.set-message-dialog {
  .el-dialog{
    .el-dialog__header{
      border-radius: 8px 8px 0 0;
    }
    .el-dialog__headerbtn {
      top: 0;
    }
    .el-dialog__body {
      padding-bottom: 12px;
      .base-editor-container .ql-editor{
        height: 160px;
      }
    }
  }
}
.valid-error-tips{
  padding:7px 16px;
  background: #FDF6EC;
  box-shadow: 0px 9px 28px 8px rgba(0,0,0,0.0500), 0px 6px 16px 0px rgba(0,0,0,0.0800), 0px 3px 6px -4px rgba(0,0,0,0.1200);
  border-radius: 4px;
  border: 1px solid #F9ECDA;
  align-items: flex-start;
  .el-message__icon{
    margin-top:4px;
    font-size:16px;
  }
  .el-message__content{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FAAE14;
    line-height: 22px;
  }
}

.base-select-user-dynamic-tab {
  height: 100%;
}
.base-select-user-dynamic {
  height: 100%;
}
</style>
